<script setup lang='ts' name="protocol-management-list-expand">
import { DELIVERYNOTESTATE_DICT } from '../constant'

const props = defineProps<{ data: any }>()
const { data } = toRefs(props)
</script>

<template>
    <div v-for="(item, index) in data"
         :key="index"
         class="protocol-list"
    >
        <div class="list-content">
            <div class="check-col">
                发货单
            </div>

            <div class="list-row">
                <div class="list-col">
                    <p class="col-title">
                        {{ item?.deliveryNoteName }}
                    </p>

                    <p>订单编号：<span>{{ item?.orderNo }}</span></p>
                </div>

                <div class="list-col">
                    <p style="padding-left: 14px;">
                        {{ DELIVERYNOTESTATE_DICT[item?.deliveryNoteState]?.label }}
                    </p>
                </div>

                <div class="list-col" />

                <div class="list-col" />
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
@bg-color: #f5f6fa;
@label-color: gray;

.protocol-list {
    width: 100%;
    border-radius: 4px;
    border-top: 1px solid @bg-color;
    padding-left: 15px;

    .list-content {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px 0;
        font-size: 14px;

        .check-col {
            width: 60px;
            text-align: center;
            background: @bg-color;
            padding: 0 2px;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 15px;
        }

        .list-row {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .list-col {
                min-width: 200px;
                color: @label-color;

                .col-title {
                    font-size: 14px;
                    font-weight: 600;
                    color: #000;

                    .col-tips {
                        .el-icon {
                            color: @label-color;
                            border: 1px solid @label-color;
                            border-radius: 8px;
                            padding: 2px;
                            transform: translateY(2px);
                            margin-right: 10px;
                        }

                        .col-txt {
                            font-size: 12px;
                            color: #4771f6;
                            background: @bg-color;
                            padding: 3px 5px;
                            border-radius: 4px;
                        }
                    }
                }
            }
        }
    }
}
</style>
